<template>
  <div class="container">
    <div class="cheader2">
      <van-icon
        @click="goBack"
        class="chl"
        name="arrow-left"
        color="#000"
        size="20"
      />
      <div class="chtitle">邀请好友</div>
      <div class="djbox"></div>
    </div>
    <img
      class="zimg"
      src="https://duckweedexchanges.oss-cn-chengdu.aliyuncs.com/90634f92493152d3902d05e768d3a2d.png"
      alt=""
    />
    <div class="box">
      <div class="f1">
        <div class="f1-1">微澜AI智能交易平台</div>
        <div class="f1-2">让数字资产交易更简单</div>
        <div class="f1-3" @click="copyDomText('https://www.duckweedaitrade.com/login?invitationCode='+userInfos.invitationCode)">
          邀请链接: login?icode={{ userInfos.invitationCode
          }}<img class="pt2-2" src="@/assets/images/fuzhi.png" alt="" />
        </div>
      </div>
      <img class="f2" :src="qrcodeImg" alt="" />
    </div>
  </div>
</template>

<script setup lang='ts'>
import QRCode from "qrcode";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/store";
import { copyDomText } from "@/utils/common";
const store = useStore();
const userInfos = store.state.users.infos;
const router = useRouter();
const qrcodeImg = ref("");
onMounted(() => {
  createQRCode();
});
const createQRCode = () => {
  QRCode.toDataURL(
    "https://www.duckweedaitrade.com/login?invitationCode=" +
      userInfos.invitationCode,
    {
      version: 7, //版本号
      errorCorrectionLevel: "Q",
      width: 80,
      height: 80,
    }
  ).then((url: string) => {
    qrcodeImg.value = url;
  });
};

const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.cheader2 {
  z-index: 1001;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }
  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 4px;
    }
    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}
.zimg {
  width: 100%;
  display: block;
  border: 0;
}
.box {
  display: flex;
  align-items: center;
  padding: 20px 15px;
  justify-content: space-between;
  background: #fff;
  .f1 {
    // flex:0 0 200px;
    display: flex;
    flex-direction: column;
    .f1-1 {
      font-size: 18px;
    }
    .f1-2 {
      font-size: 13px;
      margin: 8px 0;
    }
    .f1-3 {
      font-size: 12px;
      color: #409eff;
      display: flex;
      align-items: center;
      img {
        width: 12px;
        margin-left: 3px;
      }
    }
  }
  .f2 {
    width: 70px;
    height: 70px;
    border-radius: 2px;
  }
}
</style>
